<template>
  <view class="container">
    <view class="scan-btn" @click="startScan">
      开始扫码
    </view>
    <view class="debug-panel">
      <view class="debug-title">扫码调试信息</view>
      <view class="debug-item">
        <text>扫码结果：{{scanResult}}</text>
      </view>
      <view class="debug-item">
        <text>扫码时间：{{scanTime}}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scanResult: '',
      scanTime: '-'
    }
  },
  onLoad() {
    console.log('【scan.vue】页面加载完成');
  },
  methods: {
    // 兼容App端的扫码流程
    startScan() {
      console.log('【scan.vue】点击开始扫码');
      uni.scanCode({
        onlyFromCamera: true,
        success: (res) => {
          console.log('【scan.vue】扫码成功:', res);
          // 解析二维码内容，获取qrcodeId
          let qrcodeId = ''
          try {
            const qrData = JSON.parse(res.result)
            qrcodeId = qrData.qrcodeId
            console.log('【scan.vue】二维码内容解析成功，qrcodeId:', qrcodeId);
          } catch (e) {
            console.error('【scan.vue】二维码内容解析失败:', e);
            uni.showToast({ title: '无效二维码', icon: 'none' })
            this.scanResult = '无效二维码'
            this.scanTime = new Date().toLocaleString()
            return
          }
          this.scanResult = res.result
          this.scanTime = new Date().toLocaleString()
          // 直接跳转到授权页面（App端无需code）
          console.log('【scan.vue】跳转到授权页面，qrcodeId:', qrcodeId);
		  uni.showToast({ title: '扫码成功，即将跳转', icon: 'none' })
          uni.navigateTo({
            url: `/pages/auth/auth?qrcodeId=${qrcodeId}`
          })
        },
        fail: (err) => {
          console.error('【scan.vue】扫码失败:', err);
          this.scanResult = '扫码失败'
          this.scanTime = new Date().toLocaleString()
          uni.showToast({ title: '扫码失败', icon: 'none' })
        }
      })
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.scan-btn {
  margin: 30rpx 0;
  padding: 20rpx 60rpx;
  background: #007AFF;
  color: #fff;
  border-radius: 40rpx;
  font-size: 32rpx;
  text-align: center;
}
.debug-panel {
  margin-top: 40rpx;
  padding: 40rpx;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 20rpx;
  min-width: 500rpx;
}
.debug-title {
  font-size: 32rpx;
  margin-bottom: 20rpx;
}
.debug-item {
  font-size: 28rpx;
  margin: 10rpx 0;
}
</style> 